<script>
import dayjs from "dayjs";
import { isNumber } from "lodash";
import comMixin from "./comMixin.js";
window.dayjs = dayjs;
export default {
  mixins: [comMixin],
  props: {
    startTimeField: {
      type: String,
    },
    endTimeField: {
      type: String,
    },
    // 折叠输入框
    shortInput: {
      type: Boolean,
      default: true,
    },
    appendToBody: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    type: {
      type: String,
      default: "daterange",
    },
    before: {
      type: Number, // 日期可用范围 最近
      default: undefined,
    },
    limit: {
      type: Number, // 日期可用范围 最远
      default: undefined,
    },
    format:{
      type: String, // 返回的startTimeField，endTimeField 格式化
    }
  },
  data() {
    return {
      value: "",
    };
  },
  computed: {
    pickerOptions() {
      const defaultOptions = {
        shortcuts: [
          {
            text: $AONE_LAN.today,
            htnum: 1,
            onClick(picker) {
              const start = dayjs();
              const end = dayjs();
              const array = [start.$d, end.$d];
              array.htnum = this.htnum;
              picker.$emit("pick", array);
            },
          },
          {
            text: $AONE_LAN.yesterday,
            htnum: 2,
            onClick(picker) {
              const start = dayjs().subtract(1, "day");
              const end = dayjs().subtract(1, "day");
              const array = [start.$d, end.$d];
              array.htnum = this.htnum;
              picker.$emit("pick", array);
            },
          },
          // {
          //   text: $Lang.common.c215,
          //   htnum: 7,
          //   onClick(picker) {
          //     const start = dayjs().subtract(2, "day");
          //     const end = dayjs();
          //     const array = [start.$d, end.$d];
          //     array.htnum = this.htnum;
          //     picker.$emit("pick", array);
          //   },
          // },
          // {
          //   text: $Lang.common.c216,
          //   htnum: 8,
          //   onClick(picker) {
          //     const start = dayjs().subtract(6, "day");
          //     const end = dayjs();
          //     const array = [start.$d, end.$d];
          //     array.htnum = this.htnum;
          //     picker.$emit("pick", array);
          //   },
          // },
          {
            text: $AONE_LAN.thisWeek,
            htnum: 3,
            onClick(picker) {
              const start = dayjs().startOf("week").add(1, "day");
              const end = dayjs();
              const array = [start.$d, end.$d];
              array.htnum = this.htnum;
              picker.$emit("pick", array);
            },
          },
          {
            text: $AONE_LAN.lastWeek,
            htnum: 4,
            onClick(picker) {
              const start = dayjs()
                .subtract(1, "week")
                .startOf("week")
                .add(1, "day");
              const end = dayjs()
                .subtract(1, "week")
                .startOf("week")
                .add(7, "day");
              const array = [start.$d, end.$d];
              array.htnum = this.htnum;
              picker.$emit("pick", array);
            },
          },
          {
            text: $AONE_LAN.thisMonth,
            htnum: 5,
            onClick(picker) {
              const start = dayjs().startOf("month");
              const end = dayjs().endOf("month");
              const array = [start.$d, end.$d];
              array.htnum = this.htnum;
              picker.$emit("pick", array);
            },
          },
          {
            text: $AONE_LAN.lastMonth,
            htnum: 6,
            onClick(picker) {
              const start = dayjs().subtract(1, "month").startOf("month");
              const end = dayjs().subtract(1, "month").endOf("month");
              const array = [start.$d, end.$d];
              array.htnum = this.htnum;
              picker.$emit("pick", array);
            },
          },
          // {
          //   text: "近一月",
          //   onClick(picker) {
          //     const start = dayjs().startOf("month");
          //     const end = dayjs().endOf("month");
          //     const array = [start.$d, end.$d];
          //     array.htnum = 12;
          //     picker.$emit("pick", array);
          //   },
          // },
          // {
          //   text: $Lang.common.c218,
          //   htnum: 9,
          //   onClick(picker) {
          //     const start = dayjs().subtract(1, "month").startOf("month");
          //     const end = dayjs().endOf("month");
          //     const array = [start.$d, end.$d];
          //     array.htnum = this.htnum;
          //     picker.$emit("pick", array);
          //   },
          // },
          // {
          //   text: $Lang.common.c219,
          //   htnum: 10,
          //   onClick(picker) {
          //     const start = dayjs().subtract(2, "month").startOf("month");
          //     const end = dayjs().endOf("month");
          //     const array = [start.$d, end.$d];
          //     array.htnum = this.htnum;
          //     picker.$emit("pick", array);
          //   },
          // },
          // {
          //   text: $Lang.common.c220,
          //   htnum: -1,
          //   onClick(picker) {
          //     const start = dayjs("2010-01-01");
          //     const end = dayjs();
          //     const array = [start.$d, end.$d];
          //     array.htnum = this.htnum;
          //     picker.$emit("pick", array);
          //   },
          // },
        ],
      };
      const obj = {};
      Object.keys(this.options).forEach((key) => {
        if (this.options[key]) {
          obj[key] = defaultOptions[key];
        }
      });
      // 灰色日期
      obj.disabledDate = (time) => {
        const curDate = new Date().getTime();
        let beforeDisabled = false,
          limitDisabled = false;
        if (this.before !== undefined && this.before != null) {
          const sevenBefore = this.before * 24 * 3600 * 1000;
          const minusBD = curDate - sevenBefore;
          beforeDisabled = time.getTime() > minusBD;
        }
        if (this.limit !== undefined && this.limit != null) {
          const sevenLimit = this.limit * 24 * 3600 * 1000;
          const minusLD = curDate - sevenLimit;
          limitDisabled = time.getTime() < minusLD;
        }
        return beforeDisabled || limitDisabled;
      };
      return obj;
    },
    onlyDay() {
      return this.type == "daterange";
    },
  },
  methods: {
    onChange(arr) {
      if (arr.htnum == -1) {
        return this.onReset();
      }
      if (this.startTimeField) {
        if (this.onlyDay) {
          this.formData[this.startTimeField] = dayjs(arr[0]).format(
            this.format || "YYYY-MM-DD 00:00:00"
          );
        } else {
          this.formData[this.startTimeField] = dayjs(arr[0]).format(
            this.format || "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      if (this.endTimeField) {
        if (this.onlyDay) {
          this.formData[this.endTimeField] = dayjs(arr[1]).format(
            this.format || "YYYY-MM-DD 23:59:59"
          );
        } else {
          this.formData[this.endTimeField] = dayjs(arr[1]).format(
            this.format || "YYYY-MM-DD HH:mm:ss"
          );
        }
      }
      if (isNumber(arr.htnum)) {
        // 数字是特殊定义的，上面的数组第三个
        this.formData[this.prop] = arr.htnum;
      } else {
        this.formData[this.prop] = undefined;
      }
      this.$emit("dateChange");
    },
    onReset() {
      if (this.startTimeField) {
        this.formData[this.startTimeField] = undefined;
      }
      if (this.endTimeField) {
        this.formData[this.endTimeField] = undefined;
      }
      if (this.startTimeField) {
        this.formData[this.prop] = undefined;
      }
      this.value = "";
      this.$emit("dateChange");
    },
    onClearValue() {
      this.value = "";
    },
  },
  render() {
    return (
      <el-date-picker
        ref="datepicker"
        class={{
          "aoneui-datepicker": true,
          "aoneui-datepicker-shortInput": this.shortInput,
        }}
        v-model={this.value}
        type={this.type}
        align="right"
        unlink-panels
        // format="yyyy-MM-dd"
        append-to-body={this.appendToBody}
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        picker-options={this.pickerOptions}
        onChange={this.onChange}
      ></el-date-picker>
    );
  },
};
</script>